<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
  <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/highcharts.js}"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>数据统计</li>
    <li>厂商采购统计</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form action="/erp1/statis/firm/allfirmstatis" method="post" id="firmstatisform">
    <input type="hidden" name="pageno" id="pageno" value=""/>
    <ul class="tools">
      <li> 所属区域：
        <select name="firmPid" onchange="getCity(this.value)">
          <option value="0">请选择省份</option>
          <option th:each="p : ${session.provinces}" th:value="${p.id}" th:text="${p.pName}"
                  th:selected="${p.id==firmStatis.firmPid}">
          </option>
        </select>
        <select name="firmCity">
          <option name="">请选择城市</option>
        </select>
      </li>
      <li> 厂商名称:
        <input type="text" name="firmName" th:value="${firmStatis.firmName}"/>
      </li>

      <li class="subBut" onclick="goPage(1)"><img th:src="@{/images/t06.png}" />查询</li>
    </ul>
    <table class="tablelist">
      <thead>
        <tr>
          <th>序号</th>
          <th>厂商名称</th>
          <th>负责人</th>
          <th>所属区域</th>
          <th>采购单数量</th>
          <th>金额</th>
          <th>采购单明细</th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="f,var : ${firmstatisinfo.list}">
          <td th:text="${var.count+(firmstatisinfo.pageNum-1)*firmstatisinfo.pageSize}"></td>
          <td th:text="${f.firmName}"></td>
          <td th:text="${f.firmFounder}"></td>
          <td th:text="${f.province.pName+f.city.cName}"></td>
          <td th:text="${f.amount}"></td>
          <td th:text="${'￥'+f.total}"></td>
          <td>
          	<a th:href="'/erp1/statis/firm/firmview?id='+${f.id}" class="tablelink">查看详情</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagin">
      <div class="message">共<i class="blue" th:text="${firmstatisinfo.total}"></i>条记录，当前显示第&nbsp;<i class="blue"
                                                                                                  th:text="${firmstatisinfo.pageNum+'&nbsp;'}">2</i>页
      </div>
      <ul class="paginList">
        <li class="paginItem">
          <a href="javascript:void(0);"
             th:onclick="goPage([[${firmstatisinfo.isFirstPage?1:firmstatisinfo.pageNum-1}]])">
            <span th:class="${firmstatisinfo.isFirstPage?'pagepre':'pagenxt roate'}"></span>
          </a>
        </li>
        <li th:class="${page==firmstatisinfo.pageNum?'paginItem current':'paginItem'}"
            th:each="page : ${firmstatisinfo.navigatepageNums}">
          <a href="javascript:;" th:text="${page}" th:onclick="goPage([[${page}]])">1</a>
        </li>
        <li class="paginItem">
          <a href="javascript:void(0);"
             th:onclick="goPage([[${firmstatisinfo.isLastPage?firmstatisinfo.pages:firmstatisinfo.pageNum+1}]])">
            <span th:class="${firmstatisinfo.isLastPage?'pagepre roate':'pagenxt'}"></span>
          </a>
        </li>
      </ul>
    </div>
  </form>
</div>
</br>
<div id="container" style="min-width:400px;height:400px"></div>

<script th:inline="javascript">
	$('.tablelist tbody tr:odd').addClass('odd');

    $(function () {
      var num=$("select[name=firmPid]").val();
      getCity(num);
      bingzhuang();
    });

    function goPage(num) {
      $("#pageno").val(num);
      $("#firmstatisform").submit();
    }

    function getCity(num) {
      $.get("/erp1/ajaxCity", {"pid": num}, function (data) {
        $("select[name=firmCity]").html("");
        var options = "<option value=''>请选择城市</option>"
        var c=[[${firmStatis.firmCity}]];
        $.each(data, function (i, e) {
          if(c==e.id){
            options += "<option value='" + e.id + "' selected='selected'>" + e.cname + "</option>";
          }else{
            options+="<option value='"+e.id+"'>"+e.cname+"</option>";
          }
        });
        $("select[name=firmCity]").append(options);
      }, "json");
    }

    /*
 Highcharts JS v7.2.1 (2019-10-31)

 (c) 2009-2019 Torstein Honsi

 License: www.highcharts.com/license
*/
    (function(a){"object"===typeof module&&module.exports?(a["default"]=a,module.exports=a):"function"===typeof define&&define.amd?define("highcharts/themes/sand-signika",["highcharts"],function(b){a(b);a.Highcharts=b;return a}):a("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(a){function b(a,b,c,d){a.hasOwnProperty(b)||(a[b]=d.apply(null,c))}a=a?a._modules:{};b(a,"themes/sand-signika.js",[a["parts/Globals.js"]],function(a){a.createElement("link",{href:"https://fonts.googleapis.com/css?family=Signika:400,700",
      rel:"stylesheet",type:"text/css"},null,document.getElementsByTagName("head")[0]);a.addEvent(a.Chart,"afterGetContainer",function(){this.container.style.background="url(https://www.highcharts.com/samples/graphics/sand.png)"});a.theme={colors:"#f45b5b #8085e9 #8d4654 #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee".split(" "),chart:{backgroundColor:null,style:{fontFamily:"Signika, serif"}},title:{style:{color:"black",fontSize:"16px",fontWeight:"bold"}},subtitle:{style:{color:"black"}},
      tooltip:{borderWidth:0},labels:{style:{color:"#6e6e70"}},legend:{backgroundColor:"#E0E0E8",itemStyle:{fontWeight:"bold",fontSize:"13px"}},xAxis:{labels:{style:{color:"#6e6e70"}}},yAxis:{labels:{style:{color:"#6e6e70"}}},plotOptions:{series:{shadow:!0},candlestick:{lineColor:"#404048"},map:{shadow:!1}},navigator:{xAxis:{gridLineColor:"#D0D0D8"}},rangeSelector:{buttonTheme:{fill:"white",stroke:"#C0C0C8","stroke-width":1,states:{select:{fill:"#D0D0D8"}}}},scrollbar:{trackBorderColor:"#C0C0C8"}};a.setOptions(a.theme)});
      b(a,"masters/themes/sand-signika.src.js",[],function(){})});
    //# sourceMappingURL=sand-signika.js.map

    function bingzhuang() {
        $.ajax({
            url:"/erp1/statis/firm/bingzhuang",
            type:"get",
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            async:"false",
            success:function (data) {
              var arr=new Array();
              $.each(data,function (i,e) {
                  arr[i]=new Array();
                  for (var j=0;j<2;j++){
                      arr[i][0]=e.firmName;
                      arr[i][1]=e.total;
                }
              });

              //图片
              var chart = {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
              };
              var title = {
                text: '厂商采购金额比例'
              };
              var tooltip = {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
              };
              var plotOptions = {
                pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {
                      color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                  }
                }
              };
              var series = [{
                type: 'pie',
                name: '百分比',
                data: arr
              }];

              var json = {};
              json.chart = chart;
              json.title = title;
              json.tooltip = tooltip;
              json.series = series;
              json.plotOptions = plotOptions;
              $('#container').highcharts(json);
          }
        });
    }

</script>
</body>
</html>
